import {BaseEle} from "./core.js";


class ZPanels extends BaseEle {
    constructor() {
        super();
        let self = this;
        let template = this.children[0];
        let content = template.content.cloneNode(true);
        let arr = [...content.children]
        arr.forEach(child => {
            child.setAttribute('name', this.getAttribute('name'));
        });

        function handleToggle(e) {
            let index = arr.findIndex(child => child === e.target);
            self._log('handleToggle', e, index);
        }
        this.arr = arr;
        this.arr[this.index].addEventListener('toggle', handleToggle);
        this.selectPanel()
        this.append(content);
    }
    selectPanel() {
        this.arr[this.index].setAttribute('open', true);
    }
    get index() {
        return this.hasAttribute('selectindex') ? parseInt(this.getAttribute('selectindex')) : 0;
    }
    attrChanged(name, oldValue, newValue) {
        // console.log(name, oldValue, newValue);
        requestAnimationFrame(() => {
            this.selectPanel()
        })
    }
}

ZPanels.defsel('z-panels', {
    attrs: {
        selectindex: 0
    }
});